<template>
  <div class="category">
    <!-- 左侧一级分类 -->
    <van-sidebar v-model="active">
      <van-sidebar-item v-for="cat in categories" :key="cat.id" :title="cat.name" />
    </van-sidebar>

    <!-- 右侧子分类 -->
    <div class="son" v-if="categories.length">
      <!-- 分组名称 -->
      <div class="group" 
        v-for="group in categories[active].children" 
        :key="group.id"
      >
        <h4>{{ group.title }}</h4>
        <!-- 分组中的子分类 -->
        <van-grid :column-num="3">
          <van-grid-item v-for="item in group.items" :key="item.id" :icon="item.icon" :text="item.name" />
        </van-grid>
      </div>

    </div>

  </div>
</template>

<script lang="ts" setup>
import { fidneCategory } from '../../api/category'
import { ref } from 'vue'
const active = ref(0)

// 左侧所有分类
const categories = ref<any[]>([])
// 加载分类数据
const loadData = async () => {
  const result: any = await fidneCategory()
  categories.value = result.category
}
loadData()

</script>

<style lang="less" scoped>
:deep(.van-sidebar-item--select:before) {
  background: #f23030;
}

.category {
  display: flex;
  margin-bottom: 35px;
  .son {
    padding: 5px;
    flex: 1;
  }
}
</style>
